<template>
  <el-dialog title="打印模板" width="230mm" :visible.sync="printView" append-to-body>
    <div class="btn_print">
      <el-button plain size="mini" @click="handlePrint()">打印</el-button>
    </div>
    <div id="print_page" class="print_page">
      <div class="print_title1">{{ formType }}</div>
      <div class="print_title2">
        <span style="width: 20mm;">南京智成</span>
        <span style="width: 70mm;">审批编号：{{ form.id }}</span>
      </div>
      <table border="1" class="print_table" cellspacing="0">
        <tr>
          <td colspan="2" align="center">申请人</td>
          <td colspan="2" class="w25 tleft">{{ actBusinessStatus.createBy }}</td>
          <td colspan="2" class="w25" align="center">申请人部门</td>
          <td colspan="2" class="w25 tleft">{{ actBusinessStatus.deptName }}</td>
        </tr>
        <tr>
          <td colspan="2" class="w25" align="center">提交时间</td>
          <td colspan="2" class="w25 tleft">{{ actBusinessStatus.createTime }}</td>
          <td colspan="2" class="w25" align="center">当前审批状态</td>
          <td colspan="2" class="w25 tleft">{{ actBusinessStatus.status == 'waiting'?"处理中":"已完成"}}</td>
        </tr>
        <tr>
          <td align="center" colspan="8" style="height: 2mm;"></td>
        </tr>
        <tr>
          <td align="center" colspan="8">申请内容</td>
        </tr>
        <tr v-for="(tr,index1) in printObject" :key="index1">
          <td :colspan="td.colspan" :align="td.align" v-for="(td,index11) in tr.tds" :key="index11">
            <!-- <div v-if="typeof(td.label) == 'string'">
              {{td.label}}
            </div> -->
            {{typeof(td.label) == 'string'?td.label:null}}
            <div v-if="Array.isArray(td.label)">
              <div v-for="(value,key) in td.label" :key="key">{{td.label[key]}}</div>
            </div>
          </td>
        </tr>
        <tr>
          <td align="center" colspan="8" style="height: 2mm;"></td>
        </tr>
        <tr>
          <td align="center" colspan="8">审批流程</td>
        </tr>
        <template>
          <tr v-for="(item,index) in history" :key="index">
            <td colspan="2" align="center">{{item.name}}</td>
            <td colspan="2" align="center">{{item.nickName}}</td>
            <td colspan="4" align="center">{{item.endTime?item.comment+" "+item.endTime:"待审批"}}</td>
          </tr>
        </template>
      </table>
      <div class="print_bottom">
        <span style="width: 60mm;">打印日期: {{ new Date().format('yyyy-MM-dd hh:mm') }}</span>
      </div>
      <div class="print_bottom">
        <span style="width: 60mm;">打印人: {{ $store.state.user.nickName }}</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import printJS from "print-js";
export default {
  props: {
    formType: {
      type: String,
      default: "采购申请"
    },
    form: {
      type: Object,
      default: {}
    },
    actBusinessStatus: {
      type: Object,
      default: {}
    },
    printObject: {
      type: Array,
      default: []
    },
    history: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      printView: false
    };
  },
  methods: {
    async open() {
      this.printView = true;
    },
    handlePrint() {
      let userAgent = navigator.userAgent;
      //判断是否Firefox浏览器
      if (userAgent.indexOf("Firefox") > -1) {
        console.log("Firefox");
        printJS({
          printable: "print_page", // 标签元素id
          type: "html",
          header: "",
          style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
              padding-left: 10px;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }
            @media print{@page {size:portrait}}
            `
        });
      }
      //判断是否chorme浏览器
      if (userAgent.indexOf("Chrome") > -1) {
        console.log("Chrome");
        printJS({
          printable: "print_page", // 标签元素id
          type: "html",
          header: "",
          documentTitle: "",
          style: `@page {size:auto;margin-top:40px; margin-left:10px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            td {
              border: 1px solid #000;
              padding: 1mm 0 1mm 2mm !important;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }
            .print_page {
              width: 208mm;
              margin: 0 auto;
              padding-left:10px;
              text-align: center;
            }
            .print_table {
              width: 100%;
              margin-bottom: 4px;
            }
            .tleft {
              text-align: left;
              padding-left: 10px;
            }
            .print_title1 {
              width: 100%;
              display: flex;
              justify-content: center;
              margin-bottom: 10px;
              font-size: 22px;
              font-weight: 600;

            }
            .print_title2 {
              width: 100%;
              padding: 4px;
              display: flex;
              justify-content: space-between;
            }
            .print_bottom{
              width: 100%;
              padding-top:4px;
              display: flex;
              justify-content: flex-end;
            }
            @media print{@page {size:portrait}}
            `
        });
      }
      //判断是否IE浏览器
      if (!!window.ActiveXObject || "ActiveXObject" in window) {
        console.log("IE");
        printJS({
          printable: "print_page", // 标签元素id
          type: "html",
          header: "",
          style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
              padding-left: 10px;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }
            @media print{@page {size:portrait}}
            `
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px 20px 20px !important;
}
.btn_print {
  width: 210mm;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.print_page {
  width: 208mm;
  margin: 0 auto;
  height: 283mm;
  text-align: center;
  border: 1px solid #bbb;
  border-bottom: 0;
}
.print_table {
  width: 100%;
  margin-bottom: 4px;
}
.print_table tr td {
  padding: 1mm 0 1mm 2mm !important;
}
.w25 {
  width: 25%;
}
.tcenter {
  text-align: center;
}
.tleft {
  text-align: left;
  padding-left: 10px;
}
.w50 {
  width: 50%;
}
.print_title1 {
  width: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}
.print_title2 {
  width: 100%;
  padding: 4px;
  display: flex;
  justify-content: space-between;
}
.print_bottom {
  width: 100%;
  padding-top: 4px;
  display: flex;
  justify-content: flex-end;
}
</style>
